<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>arc.html</title>
<script>

var ctx;
var lc='rgb(0,0,0)';	//선색
var bc='rgb(0,0,0)';	//바탕색
var ra=100;				//반지름
var h=1;				//호의 길이
var d=true;				//방향

window.onload=function(){
	ctx=document.getElementById('canvas').getContext('2d');
	
	var btnBc=document.getElementById('backColor');
	var btnLc=document.getElementById('linecolor');
	var btnRa=document.getElementById('radius');
	var btnHo=document.getElementById('ho');
	var btnRight=document.getElementById('right');
	draw();
	
	btnBc.onchange=function(){
		bc=btnBc.value;
		draw();
	}
	btnLc.onchange=function(){
		lc=btnLc.value;
		draw();
	}
	btnRa.onchange=function(){
		ra=btnRa.value;
		draw();
	}
	btnHo.onchange=function(){
		h=btnHo.value;
		draw();
	}
	btnRight.onclick=function(){
		if(btnRight.checked){
			d=false;
			
		}else{
			d=true;
		}
		draw();
		
	}
	
}

function draw(){
	ctx.clearRect(0,0,800,600);
	ctx.lineWidth=5;
	ctx.strokeStyle=lc;
	ctx.fillStyle=bc;
	
	ctx.shadowColor='rgb(100,100,100)';
	ctx.shadowOffsetX='5';
	ctx.shadowOffsetY='5';	
	ctx.shadowBlur='20';
	

	ctx.beginPath();
		ctx.moveTo(400,300)
		ctx.arc(400,300,ra,0,Math.PI*h,d);
		ctx.fill();
		ctx.closePath();
		ctx.lineJoin='bevel';
		ctx.stroke();
		

	
}
</script>
</head>
<body>
<canvas id='canvas' width='800px' height="600px"></canvas>
<p/>
<label>선색</label>
<input type="color" id='linecolor'>
<label>바탕색</label>
<input type="color" id='backColor'>
<label>반지름</label>
<input type="range" id='radius' min='50' max='300' step='10'>
<label>호의 길이</label>
<input type="range" id='ho' min='0' max='2' step='0.1'>
<label>방향</label>
<!-- 스크립트에서 사용할 때는 name -->
<label><input type="checkbox" name='direct' id='right'>시계방향</label>
</body>
</html>